<template>
  <div class="bigbox">
     <div class="topbox" :style="{height:isheight+'px'}">
        <el-form :model="form" ref="form" :inline="true" label-position="right" label-width="70px" onsubmit="return false">
          <el-col :span="6">
            <el-form-item label="用电企业">
              <el-select v-model="form.orgNo" style="width: 100%;" size="small" @change="changeqiye" ref="qiye">
                <el-option v-for="(item,index) in qiyelist" :key="index" :label="item.bizOrgName" :value="item.bizOrgNo"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="日期">
              <el-date-picker v-model="form.date" type="date" placeholder="选择日期" @change="changedate"
              size="small" :picker-options="pickerOptions" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="配电室">
              <el-select v-model="form.switchroomId" style="width: 100%;" size="small" @change="changepei">
                <el-option v-for="(item,index) in peilist" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="isshow">
            <el-col :span="6">
            <el-form-item label="屏柜">
              <el-select v-model="form.screenId" style="width: 100%;" size="small" @change="changeping">
                <el-option v-for="(item,index) in pinglist" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
            <el-col :span="6">
            <el-form-item label="回路">
              <el-select v-model="form.bayId" style="width: 100%;" size="small" @change="changehui">
                <el-option v-for="(item,index) in huilist" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否计量">
              <el-select v-model="form.isMeasure" style="width: 100%;" size="small" @change="changejil">
                <el-option label="是" value="true"></el-option>
                <el-option label="否" value="false"></el-option>
                <el-option label="全部" value=""></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="">
              <!-- <el-select v-model="form.isMeasure" style="width: 100%;" size="small" @change="changejil">
                <el-option label="是" value="true"></el-option>
                <el-option label="否" value="false"></el-option>
                <el-option label="全部" value=""></el-option>
              </el-select> -->
            </el-form-item>
          </el-col>
          </template>
          <el-col :span="6">
          <el-form-item>
            <div style="text-align: right !important;">
              <button type="button" @click="chong" class="button" style=" cursor: pointer;">重置</button>
              <button type="button" @click="submit" class="button chaxun" style=" cursor: pointer;">查询</button>
              <button type="button" v-if="isshow" class="shou" @click="zedie" style=" cursor: pointer;">收起 <i class="el-icon-arrow-up"></i> </button>
              <button type="button" v-else class="shou" @click="zedie" style=" cursor: pointer;">展开 <i class="el-icon-arrow-down"></i> </button>
            </div>
          </el-form-item>
        </el-col>
        </el-form>
     </div>
     <div class="bodybox">
      <div>
        <template>
          <el-tabs v-model="activeName"  @tab-click="handleClick">
            <el-tab-pane label="日抄表清单" name="first">
              <!-- 日抄表 -->
              <ChaoBiao :tablechao="tablechao"
              :formlist="formlist"
              :form="form" ref="chaobiao"
              @shuaxin="shuaxin"></ChaoBiao>
            </el-tab-pane>
            <el-tab-pane label="日用电量" name="second">
              <!-- 日用电量 -->
              <RiyongDian
              :tablechao2="tablechao2"
              :form="form" ref="riyongdian"
              @shuaxin="shuaxin"
              :formlist="formlist"></RiyongDian>
            </el-tab-pane>
          </el-tabs>
        </template>
      </div>
     </div>
  </div>
</template>

<script>
import { getceshijiekou, getpdaxialaapi, getpgxialaapi, getrilistapi, gethuixialaapi, getriyongdianapi } from '../../api/dayreport'
import ChaoBiao from './chaobiao.vue'
import RiyongDian from './riyongdian.vue'
export default {
  name: 'ReportFormsIndex',
  components: {
    ChaoBiao,
    RiyongDian
  },
  data () {
    return {
      form: { date: '', switchroomId: '', isMeasure: '', bayId: '' },
      isshow: false,
      isheight: 80,
      activeName: 'first',
      qiyelist: [],
      peilist: [],
      pinglist: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          }
        ]
      },
      tablechao: [],
      huilist: [],
      formlist: {bizOrgName:'',switchroomId:''},
      val: '',
      tablechao2: []
    }
  },

  async mounted () {
    const date = new Date()
    const year = date.getFullYear() // 年
    const month = date.getMonth() + 1 // 月
    const day = date.getDate()
    this.form.date = year + '-' + month + '-' + day
    const res = await getceshijiekou()
    this.qiyelist = res.data.list
    this.form.orgNo = this.$store.state.statistics.userbizOrgNo ? this.$store.state.statistics.userbizOrgNo : res.data.list[0].bizOrgNo
    this.formlist.bizOrgName = this.qiyelist.filter(ele=>ele.bizOrgNo === this.form.orgNo)[0]?.bizOrgName
    this.formlist.date = this.form.date
    const ress = await getpdaxialaapi({ orgNo:this.$store.state.statistics.userbizOrgNo ? this.$store.state.statistics.userbizOrgNo : this.qiyelist[0].bizOrgNo })
    this.peilist = ress.data.list
    this.formlist.switchroomId=ress.data.list[0].name
    this.form.switchroomId = ress.data.list[0].id
    const resss = await getpgxialaapi(ress.data.list[0].id)
    this.pinglist = resss.data.list
    // this.form.screenId = resss.data.list[0].id ? resss.data.list[0].id : ''
    const ressss = await gethuixialaapi({ screenId: resss.data.list[0].id })
    this.huilist = ressss.data.list
    this.$refs.chaobiao.loading=true
    const child = await getrilistapi(this.form)
    this.tablechao = child.data.list
    this.$refs.chaobiao.loading = false
    this.$refs.riyongdian.loading=true
    const childtwo = await getriyongdianapi(this.form)
    this.tablechao2 = childtwo.data.list
    this.$refs.riyongdian.loading=false
    this.form.isMeasure = ''
  },

  methods: {

    zedie () {
      this.isshow = !this.isshow
      if (this.isshow) {
        this.isheight = 140
      } else {
        this.isheight = 80
      }
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    async changeqiye(val) {
      this.$store.commit('setuserobject', val)
      this.val = val
      // console.log(obj)
      const ress = await getpdaxialaapi({ orgNo: val })
      this.peilist = ress.data.list
      this.form.switchroomId = ress.data.list[0] ? ress.data.list[0].id : ''
      if (ress.data.list[0]) {
        const resss = await getpgxialaapi(ress.data.list[0].id)
        this.pinglist = resss.data.list
        this.form.screenId = ''
        if (resss.data.list[0]) {
          const ressss = await gethuixialaapi({ screenId: resss.data.list[0].id })
          this.huilist = ressss.data.list
          console.log(2)
        } else {
          this.huilist = []
          this.form.bayId = ''
          console.log(3)
        }
      } else {
        this.pinglist = []
        this.huilist = []
      }
    },
    async changepei (val) {
      const resss = await getpgxialaapi(val)
      this.pinglist = resss.data.list
      this.form.screenId = ''
      if (resss.data.list[0]) {
        const ressss = await gethuixialaapi({ screenId: resss.data.list[0].id })
        this.huilist = ressss.data.list
      } else {
        this.huilist = []
        this.form.bayId = ''
      }
    },
    async changeping (val) {
      const ressss = await gethuixialaapi({ screenId: val })
      this.huilist = ressss.data.list
      this.form.bayId = ''
    },
    changejil (val) {
      this.form.isMeasure = val
    },
    async submit () {

      if (!this.form.switchroomId) return this.$message.warning('配电室不可为空')
      this.$refs.chaobiao.loading=true
      const child = await getrilistapi(this.form)
      this.tablechao = child.data.list
      this.$refs.chaobiao.loading = false
      this.$refs.riyongdian.loading=true
      const childtwo = await getriyongdianapi(this.form)
      this.tablechao2 = childtwo.data.list
      this.$refs.riyongdian.loading=false
      this.formlist = {...this.form}
      this.formlist.bizOrgName = this.qiyelist.filter(ele => ele.bizOrgNo === this.form.orgNo)[0].bizOrgName
      this.formlist.switchroomId = this.peilist.filter(ele => ele.id === this.form.switchroomId)[0].name

    },
    async chong () {
      const res = await getceshijiekou()
      this.qiyelist = res.data.list
      this.form.orgNo = res.data.list[0].bizOrgNo
      this.formlist.bizOrgName = res.data.list[0].bizOrgName
      this.formlist.date = this.form.date
      const ress = await getpdaxialaapi({ orgNo: this.qiyelist[0].bizOrgNo })
      this.peilist = ress.data.list
      this.formlist.switchroomId=ress.data.list[0].name
      this.form.switchroomId = ress.data.list[0].id
      const resss = await getpgxialaapi(ress.data.list[0].id)
      this.pinglist = resss.data.list
      // this.form.screenId = resss.data.list[0].id ? resss.data.list[0].id : ''
      const ressss = await gethuixialaapi({ screenId: resss.data.list[0].id })
      this.huilist = ressss.data.list
      this.form.screenId = ''
      this.form.bayId = ''
      this.form.isMeasure = ''
      this.$refs.riyongdian.loading=true
      const child = await getrilistapi(this.form)
      this.tablechao = child.data.list
      this.$refs.riyongdian.loading=false
      this.$refs.riyongdian.loading=true
      const childtwo = await getriyongdianapi(this.form)
      this.tablechao2 = childtwo.data.list
      this.$refs.riyongdian.loading=false
    },
    changehui (val) {
      this.form.bayId = val
    },
    changedate (val) {
      this.form.date = val
    },
    async shuaxin () {
      const child = await getrilistapi(this.form)
      this.tablechao = child.data.list
      const childtwo = await getriyongdianapi(this.form)
      this.tablechao2 = childtwo.data.list
      this.$message.success('数据更新成功')
    }
  }
}
</script>

<style lang="scss" scoped>
.bigbox{
  background-color: #f1f1f1;
  padding: 10px;
}
.topbox{
  background-color: #fff;
  padding: 20px 20px 0 0px;
  box-sizing: border-box;
  // height: 80px !important;
  width: 100% !important;
  // transition-property: all;
  // transition-duration: 0.2s;
}
::v-deep.el-form--inline{
  height: 100% !important;
  box-sizing: border-box;
}
.button{
  width: 63px;
  height: 32px;
  margin-right: 5px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.chaxun{
  background-color: #1890ff;
  color: #fff;
}
.shou{
  color: #1890ff;
  border: none;
  background-color: #fff;
}
::v-deep .el-form-item{
  width: 100%;
}
::v-deep .el-form-item__content{
  width: calc(100% - 100px);
}
.bodybox{
  background-color: #fff;
  margin-top: 10px;
  padding: 20px 20px 20px 30px;
}
::v-deep .el-col-6{
  height: 42px;
  text-align: right;
}
::v-deep .el-input__inner{
  height: 30px;
}
</style>
